
<template>
  <view class="content"> 
  <view class="menu">  
    <picker  mode="region" data-id="region" @change="bindRegionChange" :value="picker.region">
      <view class="picker"> {{ picker.region[2] }}  <view class="tag" /> </view>
    </picker>  
   <picker  mode="selector" data-id="value1"  @change="bindRegionChange" :value="picker.value1" :range="options1">
     <view class="picker"> {{options1[picker.value1]}}  <view class="tag" /> </view>
   </picker>
     <picker  mode="selector" data-id="value2"  @change="bindRegionChange" :value="picker.value2" :range="options2">
     <view class="picker"> {{options2[picker.value2]}}   <view class="tag" /> </view>
   </picker>
    <picker  mode="selector" data-id="value3"  @change="bindRegionChange" :value="picker.value3" :range="options3">
     <view class="picker"> {{options3[picker.value3]}}   <view class="tag" /> </view>
   </picker> 
  </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title: "Hello",
      picker:{
        region: ["广东省", "广州市", "区域"],
        value1:0,value2:0,value3:0,
      },
      
      options1: [ "状态", "在租", "已租", "在售", "已售",],
      options2: [ "类型", "高层", "公寓", "别墅", "单家","写字楼","商铺","土地"],
      options3: [ "排序", "倒序", "升序"],
    
      list:new Array(20).fill(0),
      type :1,
    };
  },
  onLoad() {},
  methods: {
    bindRegionChange(e) { // 
      console.log(e);
      this.picker[e.currentTarget.dataset.id] =  e.detail.value
      console.log("picker发送选择改变，携带值为", e.detail.value);
    },
  },
};
</script>


<style   >
.content {
  width: 100vw;
  background: #fff;
}
.menu,.picker {
 display: flex;
 align-items: baseline;
}
.menu picker{
  flex: 1;
}
.tag{
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    border-top-color: rgb(19, 15, 15);
    POSITION: relative;
    TOP: 3PX;
    left: 5px;
} 
</style>